<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				padding:10px;
				width:50%;
			}
		</style>
	</head>
	<body>
		<h3>事件的捕捉和触发路径</h3>
		<ul>
			<li>事件从最顶级(外层)元素开始捕捉，一直到真正触发事件的元素</li>
			<li>然后按相反路径向顶级元素逐级触发</li>
		</ul>
		<div id="topDiv" onclick="topDivClick()" style="border:1px solid black">
			<div>TopDiv</div>
			<div id="secondaryDiv" onclick="secondaryDivClick()" style="border:1px solid blue">
				<div>Secondary Div</div>
				<p onclick="pClick()" style="border:1px solid green">
					Click Me!
				</p>
			</div>
		</div>
		<script>
			function topDivClick(){
				console.log("Top Div Clicked!");
			}
			function secondaryDivClick(){
				console.log("Secondary Div Clicked!");
			}
			function pClick(){
				console.log("P Clicked!");
			}
		</script>
	
		<h3>动态附加事件处理函数</h3>
		<ul>
			<li>DOM Level 0支持形如：btn.onclick=function(){...}的形式动态添加事件</li>
			<li>DOM Level 2支持addEventListener函数可动态添加事件处理函数</li>
			<li>但是IE8更老版本不支持addEventListener,只能使用attachEvent</li>
			<li>编写一个通用的事件处理模块EventUtil.js</li>
		</ul>
		<div>
			<div>
				<input type="button" id="btnAdd" value="附加事件">
			</div>
		</div>
		<script src="js/eventUtil.js"></script>
		<script>
//			document.getElementById("btnAdd").onclick = function(){
//				alert('ok');
//			};
			// 取消事件处理函数使用：xxx.onclick = null;
			
			// 在IE9+及其它浏览器尝试下列代码
//			document.getElementById("btnAdd").addEventListener("click", function(){
//				alert('OK');
//			});
			// 在IE8及以下版本尝试下列代码
//			document.getElementById("btnAdd").attachEvent("onclick", function(){
//				alert('OK');
//			});
			// 在任意浏览器尝试下列代码
			EventUtil.addHandler(document.getElementById("btnAdd"), "click", function(){
				alert('OK');
			});
		</script>
	</body>
</html>
